<template>
	<view class="page_bg pos_rel">
		<image src="https://www.worldintek.com:39011/yaolexue-service/icon_dati_bg.png" class="imgbg"></image>
		<view class="pos_rel answer-box">
			<view class="answer">
				<view class="flex justify-between align-center answer-title">
					<view>
						{{answerNowData.question.questionType == 1 ? '单选题' : '多选题'}} 
					</view>
					<view class="flex align-center">
						<view class="font_w600">
							<text class="cr-333 font_s36 ">{{answerIndex + 1}}</text>
							<text class="cr-999 font_s26">/{{answerStatusList.length}}</text>
						</view>
						<view @click="isCheckPopShow = true" class="down-arrow mar-left17">
							<u-icon size="8" name="arrow-down" color="#fff"></u-icon>
						</view>
					</view>					
				</view>
				<block v-for="(item,index) in answerStatusList" :key="index">
					<block v-if="index == answerIndex">
						<view class="answer-content">
							{{item.question.title || ''}}
						</view>
						<view class="an-check mar-top20">
							<block v-for="(v,k) in item.options" :key="v.id">
								<view :class="v.classed || ''" @click="clickOptions(v,k,item,index)">
									<image v-if="v.classed == 'error'" src="https://www.worldintek.com:39011/yaolexue-service/icon-error.png" class="w-31 h-31 mar-right12"></image>
									<image v-else-if="v.classed == 'success'" src="https://www.worldintek.com:39011/yaolexue-service/icon-success.png" class="w-31 h-31 mar-right12"></image>
									<text v-else class="w-31 h-31 mar-right12">{{v.optionIndex}}.</text>
									{{v.optionContent}}
								</view>
							</block>
						</view>
					</block>
				</block>
				
				<view class="flex align-center btn-box">
					<view @click="clickUpBtn" v-if="answerIndex > 0" class="flex up-btn">
						上一题
					</view>
					<view @click="clickNextSubmit" class="an-btn flex align-center justify-center">
						<text>{{subBtnText}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view v-if="isAnalysisShow && answerNowData.isAnswered" class="pos_rel answer-analysis">
			<view class="anal-title flex align-center pos_rel">
				<image src="https://www.worldintek.com:39011/yaolexue-service/icon_dati.png" class="w-52 h-60 anal-t-img"></image>
				<text class="padd-left76">答案解析</text>
			</view> 
			<view>
				<view class="cr-333 font_s36 font_w600 mar-top39">
					正确答案：{{answerNowData.answerOptionsStr}}
				</view>
				<view class="anal-content mar-bottom40">
					{{answerNowData.question.answerAnalysis || ''}}
				</view>
			</view>
		</view>
		<view v-if="isCheckPopShow" class="check-pop">
			<view class="mask" @click="isCheckPopShow = false"></view>
			<view class="pp-content padd-left32">
				<view class="cr-333 font_s36 padd-top39">
					选择答题项
				</view>
				<view class="ch-scorll-X mar-top30">
					<scroll-view :scroll-x="true" class="scroll-x">
						<view v-for="(item,index) in groupList" :key="index" class="x-item flex align-center justify-center" :class="{'x-item-active':groupIndex == index}">
							{{item.range}}
						</view>
					</scroll-view>
				</view>
				<swiper class="mar-top43 ch-swiper" :current="groupIndex">
					<swiper-item v-for="(item,index) in groupList" :key="index" class="swiper-item">
						<view @click="clickChAswerItem(item,v)" v-for="(v,i) in item.items" :key="v.questionId" class="mar-bottom35 block-content">
							<view class="ch-block align-center justify-center flex" :class="[v.questionStyles]">
								{{v.indexInOriginalArray + 1}}
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				startQuestionStatuses:{},			//题目状态
				subjectId:'',
				type:1,			//1=每日答题;2=专项答题
				answerList:[],
				answerIndex:0,
				isAnalysisShow:false,
				answerStatusList:[],
				answerInfo:{},
				isCheckPopShow:false,
				groupList:[],
				groupIndex:0,
				memberSubjectId:''
			}
		},
		computed:{
			answerNowData(){
				if(this.answerStatusList.length){
					console.log(this.answerStatusList[this.answerIndex],'====>this.answerStatusList[this.answerIndex]')
					let data = this.answerStatusList[this.answerIndex]
					let answerOptionsArr = (data.options ?? []).filter(item => {return item.isRight})		//正确答案的选项
					console.log(answerOptionsArr,'====>answerOptionsStr')
					return {
						...this.answerStatusList[this.answerIndex],
						answerOptionsStr:answerOptionsArr.map(item => item.optionIndex).join(',')
					}
				}else{
					return {
						options:{},
						question:{},
						isAnswered:false,
						answerOptionsStr:''
					}
				}				
			},
			subBtnText(){
				return this.answerNowData.isAnswered ? '下一题'  : '确    定'
			}
		},
		watch:{
			
		},
		async onLoad(options) {
			this.type = options.type
			this.subjectId = options.subjectId
			this.memberSubjectId = options.memberSubjectId || ''
			this.isAnalysisShow = options.isAnalysisShow == 1 ? true : false
			console.log(this.isAnalysisShow,'==>isAnalysisShow')
			!this.isAnalysisShow && await this.getStart()
			this.isAnalysisShow && await this.getAnalysis()
		},
		methods:{
			getAnalysis(){
				this.$http.get(`/yaolexue-service-portal/exam/member-subject/${this.memberSubjectId}/analysis`,{
					
				}).then(res => {
					if(res.code == 200){
						this.answerStatusList = res.data.answerStatuses.map(item => {
							return {
								...item,
								questionStyles: item.isRight ? 'success' : 'error'
							}
						})
						this.groupList = this.groupArrayWithLabels(this.answerStatusList,Math.floor(this.answerStatusList.length / 20))
						console.log(this.groupList,'==>group')
						this.getAnswerInfo() 
					}else{
						uni.showModal({
							title:'温馨提示',
							content:'获取失败!',
							showCancel:false,
							success: (e) => {
								if(e.confirm){
									uni.navigateBack()
								}
							}
						})
					}
				})
			},
			getStart(){
				return this.$http.post('/yaolexue-service-portal/exam/subjects/answer-service',{
					subjectId:this.subjectId
				}).then(res => {
					if(res.code == 200){
						this.startQuestionStatuses = res.data
						this.memberSubjectId = res.data.memberSubjectId
						this.answerStatusList = res.data.questionStatuses.map(item => {
							return {
								...item,
								questionStyles: item.isAnswered ? 'blue' : ''
							}
						})
						
						let isAnsweredIndex = this.answerStatusList.findIndex(item => !item.isAnswered)
						this.answerIndex = isAnsweredIndex != -1 ? isAnsweredIndex : 0			//全部答题就从0
						
						this.groupList = this.groupArrayWithLabels(this.answerStatusList,Math.floor(this.answerStatusList.length / 20))
						console.log(this.groupList,'==>group')
						this.getAnswerInfo() 
					}else{
						uni.showModal({
							title:'温馨提示',
							content:'获取失败!',
							showCancel:false,
							success: (e) => {
								if(e.confirm){
									uni.navigateBack()
								}
							}
						})
					}
				})
			},
			getAnswerInfo(){
				let answerObj = this.answerStatusList[this.answerIndex]
				return this.$http.get(`/yaolexue-service-portal/exam/question/${answerObj.questionId}`,{
					memberSubjectId:this.memberSubjectId
				}).then(res => {
					if(res.code == 200){
						
						let options = res.data.options.sort((a,b) => {
							return a.optionIndex.localeCompare(b.optionIndex)
						})
						options.map(item => {
							if(answerObj.isAnswered){
								let sIndex = answerObj.memberAnswer.findIndex(aItem => aItem == item.optionIndex)
								// sIndex > -1 ? item.isRight ? 'success' : 'error' : item.isRight ? 'error' : ''
								item.classed = this.isAnalysisShow ?  item.isRight ? 'success' : '' : sIndex > -1 ? 'checked' : '' 
							}
						})
						
						this.$set(this.answerStatusList,this.answerIndex,{
							...answerObj,
							options: options,
							question:res.data.question,
							tags:res.data.tags
						})
						console.log(this.answerStatusList)
						
						this.answerInfo = res.data
						
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			groupArrayWithLabels(array, groups) {
			    var chunkSize = Math.ceil(array.length / groups);
			    var result = [];
			    for (var i = 0; i < array.length; i += chunkSize) {
					var start = i + 1;
			        var endIndex = Math.min(i + chunkSize, array.length);
					
					var subArray = array.slice(i, i + chunkSize).map((item, indexInGroup) => ({
						...item,
						indexInOriginalArray: i + indexInGroup
					}));
			        result.push({
			            "group": `第${Math.floor((i/chunkSize) + 1)}组`,
			            "range": `${i+1}~${endIndex}`,
			            "items": subArray
			        });
			    }			
			    return result;
			},
			clickOptions(v,k,item,index){
				console.log(v,'===>optionsVal')
				// optionsVal.classed = 'checked'
				if(!item.isAnswered){
					if(item.question.questionType == 1){
						let op = item.options.map((itemv,indexv) => {
							return {
								...itemv,
								classed:indexv != k ? '' : itemv.classed ? '' : 'checked'
							}
						})
						this.$set(item,'options',op)
						console.log(item)
						// this.$set(v,'classed',v.classed ? '' : 'checked')
					}else{
						this.$set(v,'classed',v.classed ? '' : 'checked')
					}
					
					let optionsAnswerArr = item.options.filter(f => {
						return f.classed
					})
					this.$set(item,'answerClickArr',optionsAnswerArr)
					
				}
			},
			async clickNextSubmit(){
				if(this.answerIndex >= this.answerStatusList.length - 1 && this.answerNowData.isAnswered){
					console.log('最后一题')
					let isEvery = this.answerStatusList.every(item => item.isAnswered)
					if(isEvery){
						uni.redirectTo({
							url:`/subPages/answerRes/answerRes?type=2&memberSubjectId=${this.memberSubjectId}&subjectId=${this.subjectId}&isAnalysisShow=${this.isAnalysisShow ? 1 : 0 }`
						})
					}else{
						uni.showToast({
							title:'题目还未答完哦~',
							icon:'none'
						})
					}					
					return
				}
				
				if(this.answerNowData.isAnswered){
					this.answerIndex++
					!this.answerStatusList[this.answerIndex].options && this.getAnswerInfo()
					return
				}
				if(!(this.answerNowData?.answerClickArr?.length ?? 0)){
					uni.showToast({
						title:'请选择答案',
						icon:'none'
					})
					return
				}
				this.answerStatusList[this.answerIndex].isAnswered = true
				// this.$set(this.answerStatusList[this.answerIndex],'isAnswered',true)
				
				console.log(this.answerStatusList[this.answerIndex],'=====>this.answerStatusList[this.answerIndex]')
				if(this.isAnalysisShow){
					this.answerStatusList[this.answerIndex].options.map(item => {
						item.classed = item.classed ? item.isRight ? 'success' : 'error' : item.isRight ? 'error' : ''
					})
					this.answerStatusList[this.answerIndex].memberAnswer = this.answerNowData.answerClickArr.map(item => {
						return item.optionIndex
					})	
				}
				
				
				let isAsweredIndex = this.answerStatusList[this.answerIndex].options.findIndex(item => item.classed == 'error')
				this.answerStatusList[this.answerIndex].questionStyles = this.isAnalysisShow ? isAsweredIndex == -1 ? 'success' : 'error' : 'blue'
				this.groupList = this.groupArrayWithLabels(this.answerStatusList,Math.floor(this.answerStatusList.length / 20))
				
				
				this.getSubmitAnseer()
			},
			async clickUpBtn(){
				if(this.answerIndex > 0){
					this.answerIndex--
					!this.answerStatusList[this.answerIndex].options && await this.getAnswerInfo()
					return
				}
			},
			getSubmitAnseer(){
				this.$http.post(`/yaolexue-service-portal/exam/member-subject/${this.memberSubjectId}/answer/submit`,{
					questionId:this.answerNowData.question.id,
					answers:this.answerNowData.answerClickArr.map(item => {
						return item.optionIndex
					})						
				}).then(res => {
					if(res.code == 200){
						getApp().globalData.dayAnswerRes = res.data
					}
				})
			},
			async clickChAswerItem(item,v){
				this.answerIndex = v.indexInOriginalArray
				!this.answerStatusList[this.answerIndex].options && await this.getAnswerInfo()
				this.isCheckPopShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgbg{
		width: 100%;
		height: 1081rpx;
		position: absolute;
		top: 0;
	}
	.answer-box{
		width: 640rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 56rpx auto 0 auto;
		z-index: 1;
		&::before{
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background: #fff;
			opacity: 0.5;
			border-radius: 16rpx;
			transform: rotate(-2deg);
			top: 0;
			z-index: -1;
		}
		.answer{
			padding: 0 23rpx 10rpx 23rpx;
			.answer-title{
				height: 85rpx;
				border-bottom: 1px solid #E1E1E1;
			}
			.answer-content{
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-top: 36rpx;
				line-height: 50rpx;
				font-family: Source Han Sans CN;
			}
			.an-check{
				&>view{
					width: 594rpx;
					height: 78rpx;
					border-radius: 10rpx;
					background: #F5F5F5;
					border: 1rpx solid #E1E1E1;
					box-sizing: border-box;
					color: #666666;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					padding: 0 43rpx;
					margin-top: 35rpx;
				}
				.checked{
					background: #ECE6D8;
					border: 1rpx solid #E0B756;
					color: #E0B756;
				}
				.error{
					background: #FED7D7;
					border: 1px solid #FA312A;
					color: #FA312A;
				}
				.success{
					background: #ACE4BD;
					border: 1px solid #1EB14B;
					color: #1EB14B;
				}
			}
			.btn-box{
				margin: 96rpx auto 43rpx auto;
				.up-btn{
					min-width: 254rpx;
					height: 78rpx;
					border: 1rpx solid #FD490A;
					border-radius: 10rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FD490A;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 86rpx;
				}
				.an-btn{
					flex: 1;
					min-width: 254rpx;
					height: 78rpx;
					background: #FA312A;
					border-radius: 10rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FEFEFE;
				}
			}
			
		}
	}
	.answer-analysis{
		width: 640rpx;
		min-height: 407rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 80rpx auto 0 auto;
		padding: 0 22rpx;
		.anal-title{
			width: 100%;
			height: 85rpx;
			border-bottom: 1px solid #E1E1E1;
			.anal-t-img{
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.anal-content{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			line-height: 50rpx;
			margin-top: 37rpx;
		}
	}
	.down-arrow{
		width: 24rpx;
		height: 24rpx;
		background: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.check-pop{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 10;
		.mask{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			background: rgba(0,0,0,0.5);
			z-index: 0;
		}
		.pp-content{
			width: 100%;
			height: 561rpx;
			background: #FFFFFF;
			border-radius: 0px 0px 50rpx 50rpx;
			position: relative;
			.ch-scorll-X{
				width: 100%;
				white-space: nowrap;
				.scroll-x{
					display: inline-flex;
					white-space: nowrap;
					.x-item{
						width: 118rpx;
						height: 36rpx;
						border: 1px solid #666666;
						border-radius: 18rpx;
						box-sizing: border-box;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						margin-left: 15rpx;
						&.x-item-active{
							background: #F61414;
							color: #FFFFFF;
							border: 1px solid #F61414;
						}
					}
				}
			}
			.ch-swiper{
				width: 100%;
				height: 350rpx;
				.swiper-item{
					width: 100%;
					height: 100%;
					.block-content{
						display: inline-flex;
						flex-wrap: wrap;
						align-items: center;
						justify-content: center;
						width: 118rpx;
						margin-left: 15rpx;
					}
					.ch-block{
						width: 51rpx;
						height: 51rpx;
						background: #CFCFCF;
						border-radius: 10rpx;
						color: #333333;
						&.error{
							background: #F61414;
							color: #FFFFFF;
						}
						&.success{
							background: #1EB14B;
							color: #FFFFFF;
						}
						&.blue{
							background: #2BC3D5;
							color: #FFFFFF;
						}
					}
				}
				
			}			
		}
		
	}
</style>
